<template>
  <div>
    <h3>Count组件求和为:{{sum}}</h3>
    <input type="text" placeholder="请输入姓名" v-model="name">
    <button @click="addPerson">添加</button>
    <button @click="addPersonAsServer">添加一个人,姓名从服务器随机获取</button>
    <ul>
      <li v-for="person in persons" :key="person.id">
        {{person.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {nanoid} from 'nanoid'
export default {
  name: "Person",
  data(){
    return{
      name:''
    }
  },
  computed:{
    ...mapState('personOptions',['persons']),
    ...mapState('countOptions',['sum'])
  },
  methods:{
    addPerson(){
      let person = {id:nanoid(),name:this.name}
      this.$store.commit('personOptions/addPerson',person)
      person = {}
      this.name = ''
    },
    addPersonAsServer(){
      this.$store.dispatch('personOptions/addPersonAsServer',{})
    }
  }
}
</script>

<style scoped>

</style>